<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小红书笔记生成系统</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --card-width: 600px;
            --card-height: 800px;
            --primary-gradient: linear-gradient(135deg, #F3E5F5 0%, #E1F5FE 100%);
            --accent-color: #E91E63;
            --text-primary: #2d3436;
        }

        .note-system {
            display: grid;
            grid-template-columns: 200px 1fr;
            gap: 20px;
            padding: 20px;
        }

        .note-preview {
            width: var(--card-width);
            height: var(--card-height);
            background: var(--primary-gradient);
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            padding: 40px;
            position: relative;
        }

        .note-controls {
            position: absolute;
            right: -120px;
            top: 20px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        /* 动态内容样式 */
        .content-block { margin-bottom: 30px; }
        .main-title { font-size: 64px; font-weight: 700; line-height: 1.2; }
        .section-title { font-size: 36px; margin: 25px 0; }
        .key-point { font-size: 28px; margin: 15px 0; }
        .emphasize { color: var(--accent-color); font-weight: 500; }
        .icon { margin-right: 10px; }
        
.note-controls {
  right: 20px;
  background: rgba(255,255,255,0.9);
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.flow-diagram {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
}

.flow-step {
  background: white;
  padding: 15px 25px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
    </style>
</head>
<body>
    <div class="note-system">
        <div class="note-preview" id="previewCanvas">
            <div class="content-block">
                <h1 class="main-title">成为更好的自己</h1>
                <p class="section-title">习惯塑造身份</p>
                <div class="key-point">
                    <span class="emphasize">每个选择</span>都是身份投票
                </div>
            </div>
        </div>
        
        <div class="note-controls">
            <button onclick="saveNote()">💾 保存</button>
            <button onclick="switchTemplate(1)">📌 核心观点</button>
            <button onclick="switchTemplate(2)">🔄 习惯循环</button>
        </div>
    </div>

    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script>
        const templates = {
            1: {
                mainTitle: '习惯四定律',
                sections: [
                    {type: 'text', content: '提示→渴求→反应→奖励'},
                    {type: 'list', items: ['让它显而易见','让它有吸引力','让它简便易行','让它令人愉悦']}
                ]
            },
            2: {
                mainTitle: '习惯循环系统',
                sections: [
                    {type: 'diagram', steps: ['👀 提示','💓 渴求','✋ 反应','🎉 奖励']},
                    {type: 'quote', content: '每个选择都是身份投票'}
                ]
            }
        };

        function generateContent(template) {
            return `
                <div class="content-block">
                    <h1 class="main-title">${template.mainTitle}</h1>
                    ${template.sections.map(section => {
                        switch(section.type) {
                            case 'list': 
                                return `<ul>${section.items.map(item => `<li>${item}</li>`).join('')}</ul>`;
                            case 'diagram':
                                return `<div class="flow-diagram">
                                    ${section.steps.map(step => `<div class="flow-step">${step}</div>`).join('→')}
                                </div>`;
                            default:
                                return `<p class="section-text">${section.content}</p>`;
                        }
                    }).join('')}
                </div>
            `;
        }

        function switchTemplate(id) {
            const preview = document.getElementById('previewCanvas');
            preview.innerHTML = generateContent(templates[id]);
        }

        function saveNote() {
            html2canvas(document.querySelector("#previewCanvas"), {
                ignoreElements: (el) => el.closest('.note-controls')
            }).then(canvas => {
                const link = document.createElement('a');
                link.download = `note_${Date.now()}.png`;
                link.href = canvas.toDataURL();
                link.click();
            });
        }
    </script>
</body>
</html>
